<!-- 提现记录 -->
<template>
    <view class="page">
        <status-bar title="提现记录"></status-bar>
        <view class="wdw_list">
            <view class="wdw_item" v-for="(item, index) in deposit" :key="index" v-if="item.bankCard">
                <view class="wdw_bank_money">
                    <view class="f_032">{{ item.bankName }}(尾号{{ item.bankCard }})</view>
                    <view class="f_028 c_ff4b4e">￥{{ item.money }}</view>
                </view>
                <view class="wdw_state">
                    <view class="c_999999" v-if="item.state == 1">正在处理...</view>
                    <view class="success-color" v-if="item.state == 2">
                        提现成功
                        <br />
                        {{ item.handleTime }}
                    </view>
                    <view class="error-color" v-if="item.state == 0">
                        提现失败
                        <br />
                        {{ item.handleTime }}
                    </view>
                </view>
                <view class="color_ff4 size28" v-if="item.reason">{{ item.reason }}</view>
                <view class="wdw_time">
                    <view class="d-flex a-center">
                        <view class="size28">发起时间：</view>
                        <view class="size30">{{ item.createTime }}</view>
                    </view>
                    <view class="d-flex a-center p-left10 p-right10" v-if="item.payVoucherArr && item.payVoucherArr.length" @click.stop="$common.previewImgs(index, item.payVoucherArr)">
                        <view class="iconfont icon-tupian color_99 size46"></view>
                    </view>
                </view>
            </view>
        </view>
        <empty v-if="noData" type="1" cat="3" :msg="errMsg"></empty>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        data() {
            return {
                deposit: [],
                noData: false,
                errMsg: '还没有相关提现记录哦 ~'
            };
        },
        onShareAppMessage(option) {
            let shareData = uni.getStorageSync('shareData');
            let vid = uni.getStorageSync('vid');
            return {
                title: shareData.title,
                desc: shareData.desc,
                path: '/pages/index/index?share_v_id=' + vid + '&pageType=99',
                imageUrl: shareData.imageUrl
            };
        },
        onLoad() {
            that = this;
            that.getDeposit();
        },
        methods: {
            getDeposit: function () {
                that.$http
                    .post({
                        url: '/singleSaleApi/withdrawalSubsidiary'
                    })
                    .then((res) => {
                        if (res.status) {
                            that.deposit = res.data;
                            if (that.deposit) {
                                that.deposit.forEach((item, index) => {
                                    if (item.bankCard) that.deposit[index].bankCard = item.bankCard.substring(item.bankCard.length - 4, item.bankCard.length);
                                });
                            }
                            if (!that.deposit || that.deposit.length < 1) that.noData = true;
                        } else {
                            that.errMsg = res.msg;
                        }
                    });
            }
        },
        computed: {
            ...mapState(['vid'])
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style scoped lang="scss">
    .page {
        background-color: $page;
        padding-top: 20rpx;

        .wdw_list {
            width: 720rpx;
            margin: 0 auto;
        }

        .wdw_item {
            border-radius: 10px;
            margin-bottom: 30rpx;
            padding: 30rpx;
            background-color: #ffffff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            position: relative;

            .wdw_bank_money {
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
            }

            .wdw_state {
                width: 100%;

                display: flex;
                display: -webkit-flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                text-align: center;
                padding: 36rpx 0;
                // position: absolute;
                // top: 0;
                // left: 0;
                z-index: 1;

                view {
                    font-size: 30rpx;
                }
            }

            .wdw_time {
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                font-family: arial;
                color: #999999;
                padding-bottom: 20rpx;
                z-index: 1;
                margin-top: 10rpx;
            }
        }
    }

    .empty {
        color: red;
    }
</style>
